<script setup>
import { ref } from "vue";
import { getShopList } from "@/utils";
import OrderCard from "@/components/orderCard.vue";

const props = defineProps({
  classifyId: Number,
})
const orderList = ref([])
const Page = ref(1)
const Size = ref(15)
const Total = ref(0)
const curTotal = ref(0)
const Error = ref(false)
const loading = ref(false);
const finished = ref(false);
const onLoad =  async () => {
  try {
    const {total, rows} = await getShopList(Page.value, Size.value, props.classifyId)
    orderList.value.push(...rows)
    Total.value = total
    loading.value=false
    Page.value++
    curTotal.value+=Size.value
    if(curTotal.value>=Total.value) finished.value=true
  }catch (e){
    loading.value = false;
    Error.value = true;
  }
}

</script>

<template>
  <view class="orderList">
    <van-list
        class="list"
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
    >
      <view class="content">
        <order-card
            v-for="(v,i) in orderList"
            :key="i"
            :order-info="v"
        />
      </view>
    </van-list>
  </view>
</template>

<style lang="scss" scoped>
.orderList{
  width: 100%;
}
.content{
  //min-height: calc(200vh);
  height: calc(100vh - 252px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 8px;
  background: #ddd;
  padding: 8px;
  overflow: hidden;
  overflow-y: auto;
}
</style>